<template>
      <div id="baolist2">
        <div class="list" v-for="(item,index) in arr" :key="index" >
            <img :src="item.picture">
            <span class="local">{{item.id}}</span>
            <h4>{{item.name}}</h4>
            <span class="s1">爆爆团价</span>
            <p>
                <span class="money">￥{{item.min_price}}</span>
                <span class="discount" v-show="item.promotion_info!=''">{{item.promotion_info}}</span>
            </p>
            <span class="sell">已售{{item.month_saled}}份</span>
            <p class="price">￥{{item.min_price}}</p>
            <button>马上抢</button>
        </div>
    </div>
</template>

<script>
import { tuan_list } from '@/utils/api'
export default {
    data(){
        return{
            arr:[],
        }
    },
    mounted(){
        tuan_list({status:1}).then((res)=>{
            this.arr=res.data.list;
        })
    }
}
</script>

<style lang="scss" scoped>
    .list {
        height: 160px;
        border: 1px black solid;
        margin: 10px 0;
        border-radius: 10px;
        position: relative;
    }
    .list  img{
        height: 140px;
        width: 140px;
        float: left;
        margin:5px;
    }
    .list .local{
    font-size: 12px;
    color: #959595;
    }
    .list h4{
    margin: 5px 0;
    }
    .list  .score{
        font-size: 12px;
        color: red;
        display: inline-block;
        margin-top: 10px;
    }
  
    .list p{
    position: absolute;
    bottom: 40px;
    left: 147px;
    }
    .list .s1{
    color: red;
    font-size: 14px;
    position: absolute;
    right: 167px;
    top: 53px;
    }
    .list p .money {
        color:red;
        font-size: 20px;
        margin-right:5px;
    }
    .list p .discount{
        border: 1px red solid;
        overflow: hidden;
        white-space: nowrap;
        border-radius: 5px;
        width: 30px;
        text-align: center;
        color: #f00;
        font-size: 12px;
    }
    .list .price{
        text-decoration-line: line-through;
        color: gainsboro;
        font-size: 14px;
        position: absolute;
        bottom: 16px;
        left: 150px;
    }
    button{
        border: none;
        background: red;
        color: #fff;
        width: 68px;
        height: 32px;
        border-radius: 30px;
        position: absolute;
        right: 1%;
        bottom: 32%;
    }
    .list  .sell{
        font-size: 12px;
        color: #f00;
        position: absolute;
        right: 3%;
        bottom: 17%;
    }
</style>